<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
	</head>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css" />

	<!-- 可选的Bootstrap主题文件（一般不用引入） -->
	<link rel="stylesheet" href="css/bootstrap-theme.min.css" />

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

	<link rel="stylesheet" type="text/css" href="css/signin.css"/>
	<body>
		<div class="container">

			<form class="form-signin" role="form" method="get" >
				<h2 class="form-signin-heading">输入工号查询</h2>
				<input id="gh" type="text" class="form-control" placeholder="工号" value="" autofocus>
				<hr />
				<button class="btn btn-lg btn-primary btn-block" type="button" onclick="query()">查询</button>
			</form>
			<div class="row">
				
				<div class="col-md-5 col-sm-4 col-xs-2">
				</div>
				<div id="rst" style="display: none;" class="col-md-5 col-sm-6 col-xs-9">
				</div>
				<div class="col-md-4 col-sm-1">
				</div>
			</div>

		</div>
		<!-- /container -->
	</body>

</html>
<script>
	function query(){
		var ele=document.getElementById("gh");
		var val=ele.value;
		var rst="未找到指定工号"+val+"对应人员";
		$.get("./js/dat.js",function(dat){
			var arr=eval('('+dat+')');
			$(arr).each(function(){
				one=this;
				var no=one['no'];
				if($.trim(no)==val){
					rst="姓名为"+one['name']+"("+one['no']+")假期为"+one['len']+"天 "
					
				}
			});
			$("#rst").text(rst);
			$("#rst").css("display","block");
		});
	}
</script>